<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <div class="supplier-list block-box align-left"
                 v-for="(item,index) in goodsList"
                 :key="index"
            >
                <div class="main-color flex">
                    <div class="default" v-if="item.id==2">默认</div>
                    供应商名称：{{item.title}}
                </div>
                <div class="small-font-size second-color">联系人姓名：张三</div>
                <div class="small-font-size second-color supplier-phone">
                    <div>联系人电话：15222222222</div>
                    <div class="big-font-size" :class="item.type!=0?'price-color':'green-color'">{{item.type!=0?'解绑':'绑定'}}</div>
                </div>
                <div class="second-color middle-font-size">所在地区：天津市-天津-滨海新区</div>
            </div>
            <div class="seize-seat light-color">-- 没有数据了 --</div>
        </div>
        <div class="body_background create-button-box">
            <mt-button class="background white-color middle-font-size create-button"
                       @click="configSupplierFun"
            >设置默认供应商
            </mt-button>
        </div>

    </div>
</template>

<script>

    export default {
        name: "ConfigSupplier",
        data() {
            return {
                GetWindowBackground: {
                    'min-height': ''
                },
                goodsList: [
                    {
                        id: 1,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        type: 1,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 2,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        type: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 3,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        type: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 4,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        type: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 5,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        type: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }
                ],
            }
        },
        mounted() {

        },
        methods: {

            //设置供应商
            configSupplierFun() {
                this.$router.push('/StockGoodsDetail')
            },
            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },

        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },
    }
</script>

<style lang="scss" scoped>

    .padding-top10 {
        padding-top: 15px;
        margin-bottom: 80px;
    }

    .supplier-list {
        padding: 15px;
        display: flex;
        align-items: flex-start;
        border-radius: 6px;
        div {
            padding: 2px 0;
        }
        .supplier-phone {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }

    .create-button-box {
        width: 100%;
        height: 80px;
        position: fixed;
        bottom: 0px;
        .create-button {
            width: 60%;
            margin-top: 20px;
            border-radius: 10px;
        }
    }
    .default {
        width: 34px;
        height: 15px;
        background: #6678ff;
        position: relative;
        font-size: 12px;
        text-align: center;
        color: #e9f9fb;
        border-radius: 4px 4px 0 0;
        margin-right: 5px;
    }

    .default:after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 17px solid transparent;
        border-right: 17px solid transparent;
        border-top: 3px solid #6678ff;
    }

</style>